<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="form"> 
            <p:dataGrid var="pr" value="#{eventController.topNewNews}" columns="2"
                        rows="8" styleClass="abc" paginator="true" pageLinks="6"  
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">  
                <p:column>
                    <p:panel header="#{pr.topic}" >  
                        <h:panelGrid columns="2" >
                            <h:column>
                                <img class="_pr_image" src="#{facesContext.externalContext.request.contextPath}/resources/image/#{pr.imageurl}" width="200px" height="100px"/>
                            </h:column>
                            <h:column>                                    
                                <h:outputText value="Price: #{pr.startDate}" />  <br/>
                                <h:outputText value="Amount: #{pr.endDate}" />
                                <br/>
                                <br/>
                                <br/>
                                
                                <p:commandButton value="Detail"  update=":prDetail" oncomplete="prDialog.show()">
                                    <f:setPropertyActionListener value="#{pr}" target="#{eventController.current}" />  
                                </p:commandButton><br/>
                                <br/>                                  
                            </h:column>                                                                                                            
                        </h:panelGrid>  
                    </p:panel>  
                </p:column>
            </p:dataGrid>  
        </h:form>     

        <p:dialog header="Product Detail" widgetVar="prDialog" modal="true" showEffect="slide" width="500" height="250">  
            <h:form prependId="false" id ="prDetail">
                <h:outputText value="Hello World!"/>
            </h:form>
        </p:dialog>  
    </h:body>
</html>

